<template>
	<view>
		<view class="top">
			<view class="top_img"></view>
			<view class="top_text"  v-for="(items, index) in name" :key="index">
				<view class="con_name">
				{{items.name}}
				</view>
				<view class="line"></view>
				<view class="con_alias">{{items.alias}}</view>
			</view>
			<view class="phone">
				<view class="iconfont icon-paiqi">
				</view>
			</view>
		</view>
		<view class="xpadding"></view>
		<view class="guild">
			<view class="guild_text">
				<block v-for="(items, index) in tabData" :key="index">
					<view class="guild_massage" :class="nowIndex==items.id?'active':''" @tap="tgTabs(items.id)">
						<view class="text">
							{{items.title}}
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="xpadding"></view>
		<view class="content" v-if="nowIndex==0">
			<view class="content_top">
				<view class="top_header">基本信息</view>
				<navigator url="modifyinformation/modifyinformation">
					<view class="top_img">
						<view class="iconfont icon-loufang"></view>
					</view>
				</navigator>
			</view>
			<view class="content_center" v-for="(items, index) in topData" :key="index">
				<view class="con_li">
					<view class="con_header">{{items.title}}</view>
					<view class="con_con">{{items.text}}</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="nowIndex==1">
			<view class="content_top">
				<view class="top_header">项目信息</view>
				<view class="top_img">
					<view class="iconfont icon-loufang"></view>
				</view>
			</view>
			<view class="content_center"   v-for="(items, index) in topData" :key="index">
				<view class="con_li">
					<view class="con_header">{{items.title}}</view>
					<view class="con_con">{{items.text}}</view>
				</view>
			</view>
		</view>
		<view class="power_content" v-if="nowIndex==2">
			<view class="power_manager">
				<view class="manager_title">角色权限</view>
				<view class="manager_module1">
					<view class="mng_module1_left">店长（全部模块）</view>
					<view class="mng_module1_right">
						<switch class="sopacity" opacity="0.5" disabled checked style="transform:scale(0.82)" color=""/>
						
						<!-- <view class="uni-list-cell uni-list-cell-pd">
							<view class="uni-list-cell-db">关闭</view>
							<switch />
						</view> -->
					</view>
				</view>
				<view class="manager_module2">
					<view class="mng_module2_left">管理费（机构模块）</view>
					<view class="mng_module2_right">
						<switch class="sopacity" disabled checked style="transform:scale(0.82)"/>
					</view>
				</view>
			</view>
			<view class="xpadding"></view>
			<view class="power_list" v-for="(items,index) in powerListData" :key="index">
				<view class="power_list_title">{{items.title}}</view>
				<view class="power_list1">
					<view class="iconfont icon-L"></view>
					<view class="power_list1_c">{{items.powerTop}}</view>
					<view class="power_list1_r">
						<switch :disabled="items.powerTopActive?true:false" :class="items.powerTopDisabled?'':'sopacity'"  :checked="items.powerTopActive" style="transform:scale(0.82)"/>
						
						 <!-- :class="nowIndex==items.id?'active':''" @tap="tgTabs(items.id)" -->
						
					</view>
				</view>
				<view class="power_list2">
					<view class="iconfont icon-L"></view>
					<view class="power_list2_c">{{items.powerFooter}}</view>
					<view class="power_list2_r">
						<switch :class="items.powerTopDisabled?'':'sopacity'"  :checked="items.powerTopActive" style="transform:scale(0.82)"/>
					</view>
				</view>
				<view class="xpadding"></view>
			</view>
		</view>
		<view class="xplaceholder"></view>
		<view class="fixed">
			人员交接
		</view>
	</view>
</template>

<script>
	//phone:'15888888888',birthday:'1990/10/10',sex:'男',carnum:'421101199508233224',joindata:'2019/07/12',address:'武汉市洪山区',worker:'非工人
	export default {
		data() {
			return {
				name:[
					{name:'李明',alias:'李师傅'}
				],
				nowIndex: 0,
				tabData: [
					{title: '基本信息', id: 0},
					{title: '项目信息', id: 1},
					{title: '权限信息', id: 2},
				],
				topData: [
				 	//{contentdata:['15888888888','1990/10/10','男','421101199508233224','2019/07/12','武汉市洪山区','非工人']},
				 	{title:'员工电话 :',text:'15888888888',value:'phone'},
					{title:'员工生日 :',text:'1990/10/10',value:'birthday'},
					{title:'员工性别 :',text:'男',value:'sex'},
					{title:'证件号码 :',text:'421101199508233224',value:'carnum'},
					{title:'入职日期 :',text:'2019/07/12',value:'joindata'},
					{title:'家庭住址 :',text:'武汉市洪山区',value:'address'},
					{title:'是否工人 :',text:'非工人',value:'worker'}
				 ],
				 powerListData: [
					{title:'市场销售（销售模块）',powerTop:'机构所有用户',powerTopActive:true,powerTopDisabled:false,powerFooterActive:false,powerFooterDisabled:false,powerFooter:'仅限跟进用户'},
					{title:'设计师（设计模块）',powerTop:'机构所有用户',powerTopActive:true,powerTopDisabled:false,powerFooterActive:true,powerFooterDisabled:false,powerFooter:'仅限跟进用户'},
					{title:'项目经理（项目模块）',powerTop:'机构所有用户',powerTopActive:false,powerTopDisabled:true,powerFooterActive:false,powerFooterDisabled:true,powerFooter:'仅限跟进用户'},
					{title:'材料员（材料模块）',powerTop:'机构所有用户',powerTopActive:true,powerTopDisabled:false,powerFooterActive:true,powerFooterDisabled:false,powerFooter:'仅限跟进用户'},
					{title:'工人（工人模块）',powerTop:'机构所有用户',powerTopActive:true,powerTopDisabled:false,powerFooterActive:false,powerFooterDisabled:false,powerFooter:'仅限跟进用户'}
				 ]
			}
		},
		methods: {
			tgTabs(tab) {
				this.nowIndex = tab;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	switch{
		width: 88upx;
		height: 60upx;
	}
	.top{
		width: 100%;
		height: 88upx;
		padding-top: 36upx;
		display: flex;
		padding-bottom: 25upx;
		background-color: #ffffff;
		.top_img{
			width: 88upx;
			height: 88upx;
			margin-left: 30upx;
			background-color: blueviolet;
			border-radius: 50%;
		}
		.top_text{
			height: 88upx;
			line-height: 88upx;
			display: flex;
			.con_name{
				text-align: center;
				font-size: 36upx;
				margin-right: 14upx;
				margin-left: 10upx;
			}
			.line{
				width: 2upx;
				height:30upx;
				 background: rgba(51,51,51,1);
				 margin-top: 32upx;
				 display: flex;
				 align-items:flex-end; 
			}
			.con_alias{
				color: #666666;
				font-size: 24upx;
				margin-left: 15upx;
				
			}
		}
		.phone{
			margin-left: auto;
			margin-right: 34upx;
			margin-top: 10upx;
			width: 66upx;
			height: 66upx;
			border-radius: 50%;
			background-color: #1b82d1;
			color: #ffffff;
			.iconfont{
				text-align: center;
				height: 66upx;
				line-height: 66upx;
			}
		}
	}
	.guild{
		width: 100%;
		background-color: #ffffff;
		.guild_text{
			margin-left: 30upx;
			margin-right: 30upx;
			display: flex;
			.guild_massage{
				width: calc(100% / 3);
				position: relative;
				.text{
					height: 78upx;
					line-height: 78upx;
					font-size: 36upx;
					text-align: center;
				}
				&.active{
					color: #1b82d1;
					&:after{
						position: absolute;
						bottom: 0;
						left: 10%;
						width: 80%;
						height: 2px;
						content: "";
						background-color: #1b82d1;
					}
				}
			}
		}
	}
	.content{
		width: 100%;
		background-color: #ffffff;
		.content_top{
			height: 90upx;
			line-height: 90upx;
			display: flex;
			margin-left: 28upx;
			margin-right: 32upx;
			width: calc(100%-60upx);
			border-bottom: 1px solid rgba(241,241,241,1);
			position: relative;
			.top_header{
				font-size: 30upx;
				color: #333333;
				font-weight: bold;
				
			}
			.top_img{
				width: 50upx;
				height: 50upx;
				margin-top: 20upx;
				border-bottom: 1px solid #1b82d1;
				color: #ffffff;
				background-color: #1b82d1;
				position: absolute;
				right: 34upx;
				.iconfont{
					text-align: center;
					height: 50upx;
					line-height: 50upx;
					color: #1b82d1;
				}
			}
		}
		.content_center{
			width: 100%;
			.con_li{
				height: 87upx;
				line-height: 87upx;
				width: calc(100%-60upx);
				margin-left: 28upx;
				margin-right: 32upx;
				border-bottom: 1px solid rgba(241,241,241,1);
				display: flex;
				.con_header{
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
				}
				.con_con{
					color: #666666;
					font-size: 30upx;
					margin-left: 12upx;
				}
			}
		}
	}
	.power_content{
		.power_manager{
			background-color: #ffffff;
			width: 100%;
			.manager_title{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				border-bottom: 1px solid #f1f1f1;
				font-weight: bold;
			}
			.manager_module1{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				border-bottom: 1px solid #f1f1f1;
				display: flex;
				font-weight: bold;
				.mng_module1_left{
					
				}
				.mng_module1_right{
					margin-left: auto;
					.sopacity{
						opacity: .5;
					}
				}
			}
			.manager_module2{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				display: flex;
				font-weight: bold;
				.mng_module2_left{
					
				}
				.mng_module2_right{
					margin-left: auto;
					.sopacity{
						opacity: .5;
					}
				}
			}
		}
		.power_list{
			background-color: #ffffff;
			width: 100%;
			.power_list_title{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				border-bottom: 1px solid #f1f1f1;
				font-weight: bold;
			}
			.power_list1{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				border-bottom: 1px solid #f1f1f1;
				display: flex;
				.iconfont{
					color: #1b82d1;
				}
				.power_list1_c{
					font-size: 30upx;
					color: #333333;
					margin-left: 10upx;
				}
				.power_list1_r{
					margin-left: auto;
					.sopacity{
						opacity: .5;
					}
				}
			}
			.power_list2{
				height: 89upx;
				line-height: 89upx;
				color: #333333;
				font-size: 30upx;
				margin-left: 30upx;
				margin-right: 30upx;
				width: calc(100%-60upx);
				border-bottom: 1px solid #f1f1f1;
				display: flex;
				.iconfont{
					color: #1b82d1;
				}
				.power_list2_c{
					font-size: 30upx;
					color: #333333;
					margin-left: 10upx;
				}
				.power_list2_r{
					margin-left: auto;
					// switch{
					// 	opacity: 0.5;
					// }
				}
			}
		}
	}
	.fixed{
		position: fixed;
		width: 100%;
		height: 88upx;
		bottom: 0;
		background-color: #1b82d1;
		color: #ffffff;
		text-align: center;
		line-height: 88upx;
	}
</style>
